<template>
  <div class="mobile-refresh-list">
    <van-pull-refresh
        v-model="refreshing"
        @refresh="onRefresh"
        :success-text="refreshSuccessText"
    >
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          class="list-container"
      >
        <!-- 列表项 - 采用卡片式布局 -->
        <van-card
            v-for="(item, index) in currentPageData"
            :key="index"
            :title="getItemTitle(item)"
            class="list-item"
            @click="handleItemClick(item, index)"
        >
          <template #desc>
            <div class="list-item-content">
              <div
                  v-for="(column, colIndex) in columns.filter(col => col.key !== titleKey)"
                  :key="colIndex"
                  class="list-item-row"
              >
                <span class="list-item-label">{{ column.title }}:</span>
                <span class="list-item-value">{{ item[column.key] }}</span>
              </div>
            </div>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref, computed, onMounted } from 'vue';
import { VanPullRefresh, VanList, VanCard, Toast } from 'vant';

// 定义列配置的类型
interface Column {
  key: string;    // 对应数据字段名
  title: string;  // 列标题
  isTitle?: boolean; // 是否作为卡片标题
}

// 定义数据项的类型
type Item = Record<string, any>;

// 入参定义
const props = defineProps<{
  total: number;           // 总条数
  pageSize: number;        // 每页条数
  currentPageData: Item[]; // 当前页数据
  columns: Column[];       // 列配置
}>();

// 出参事件
const emit = defineEmits<{
  (e: 'item-click', item: Item, index: number): void;  // 点击每条数据事件
  (e: 'load-more', page: number): void;               // 加载更多事件，返回要加载的页码
  (e: 'refresh', page: number): void;                 // 下拉刷新事件，返回要刷新的页码（通常是第1页）
}>();

// 状态管理
const refreshing = ref(false);       // 下拉刷新状态
const loading = ref(false);          // 上拉加载状态
const finished = ref(false);         // 是否加载完毕
const currentPage = ref(1);          // 当前页码
const refreshSuccessText = ref('刷新成功');

// 找到作为标题的字段
const titleKey = computed(() => {
  const titleColumn = props.columns.find(col => col.isTitle);
  return titleColumn ? titleColumn.key : props.columns[0]?.key;
});

// 获取列表项的标题
const getItemTitle = (item: Item) => {
  return titleKey.value ? item[titleKey.value] : '';
};

// 监听总条数变化，判断是否加载完毕
const checkFinished = () => {
  finished.value = props.currentPageData.length >= props.total;
};

// 下拉刷新
const onRefresh = () => {
  // 重置状态
  currentPage.value = 1;
  finished.value = false;

  // 触发刷新事件，通知父组件加载第一页数据
  emit('refresh', 1);

  // 模拟加载过程，实际中由父组件加载完成后设置refreshing为false
  setTimeout(() => {
    refreshing.value = false;
  }, 500);
};

// 上拉加载更多
const onLoad = () => {
  // 如果已经加载完所有数据，直接结束
  if (props.currentPageData.length >= props.total) {
    loading.value = false;
    finished.value = true;
    return;
  }

  // 计算下一页页码
  const nextPage = currentPage.value + 1;
  currentPage.value = nextPage;

  // 触发加载更多事件，通知父组件加载下一页数据
  emit('load-more', nextPage);

  // 实际中由父组件加载完成后设置loading为false
};

// 处理列表项点击
const handleItemClick = (item: Item, index: number) => {
  emit('item-click', item, index);
};

// 监听数据变化，更新加载状态
const handleDataChange = () => {
  loading.value = false;
  refreshing.value = false;
  checkFinished();
};

// 监听props变化
watch(
    () => [props.currentPageData, props.total],
    handleDataChange,
    { deep: true }
);

// 初始化时检查是否已加载完毕
onMounted(() => {
  checkFinished();
});
</script>

<style scoped>
.mobile-refresh-list {
  height: 100%;
  background-color: #f5f5f5;
}

.list-container {
  padding: 12px;
}

.list-item {
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.list-item-content {
  padding-top: 8px;
}

.list-item-row {
  display: flex;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.5;
}

.list-item-label {
  flex: 0 0 35%;
  color: #666;
  font-weight: 500;
}

.list-item-value {
  flex: 0 0 65%;
  color: #333;
  word-break: break-all;
}

/* 优化加载提示样式 */
:deep(.van-list__loading) {
  padding: 15px 0;
}

:deep(.van-list__finished-text) {
  color: #999;
  padding: 15px 0;
}
</style>
